<style>
    .none{
        display: none;
    }
</style>
<div class="container-fluid mt-4">
    <!-- 头部标题 -->
    <div class="card mb-2">
        <!--Card content-->
        <div class="card-body">
            <h6 class="mb-2 mb-sm-0 pt-1" style="text-align: center;">视频管理</h6>
        </div>
    </div>
    <!-- 头部标题-end -->
</div>
<div class="container-fluid">
    <div class="row">
        <div class="col-lg">
            <div class="card mb-2">
                <!--Card content-->
                <div class="card-body">
                    <form>
                        <div class="form-row align-items-center mb-3">
                            <div class="col-auto">
                                <select class="form-control form-control-sm selection">
                                    <option value="0">请选择课程</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-control form-control-sm selection">
                                    <option value="0">请选择老师</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <select class="form-control form-control-sm selection">
                                    <option value="-2">请选择状态</option>
                                    <option value="0">待审核</option>
                                    <option value="-1">审核未通过</option>
                                    <option value="1">审核通过</option>
                                    <option value="2">视频上架</option>
                                    <option value="3">视频下架</option>
                                </select>
                            </div>
                            <div class="col-auto">
                                <button type="button" class="btn btn-info btn-sm" onclick="search()">搜索</button>
                            </div>
                        </div>
                    </form>
                    <div class="table-responsive">
                        <table class="table table-striped table-bordered table-align">
                            <thead class="thead-dark">
                                <tr>
                                    <th class="col-min-90">视频编号</th>
                                    <th class="col-min-90">所属学科</th>
                                    <th class="col-min-90">所属老师</th>
                                    <th>视频简介</th>
                                    <th class="col-min-120">课程视频</th>
                                    <th class="col-min-120">视频状态</th>
                                    <th class="col-min-120">操作</th>
                                </tr>
                            </thead>
                            <tbody id="showBody">
                                
                            </tbody>
                        </table>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
<script>
//遍历表单
function refresh() {
    $.ajax({
            url:"../videoCourse_stu/server/vedioPage.php",
            type:"post",
        }).done((result)=>{
            //表格展示
            var str="";
            $("#showBody").html("");
            for (const p of result) {

                //表格
                var status="";
                var show="";
                if (p.status==-1) {//禁用  status为视频状态，show为按钮展示
                    status=`<td class="text-danger" >审核未通过</td>`;
                    show="";
                }else if(p.status==0){//审核状态
                    status=`<td class="text-primary">待审核</td>`;
                    show=`<button type="button" class="btn btn-primary btn-sm" onclick="examine(this,1)">通过</button>
                        <button type="button" class="btn btn-danger btn-sm" onclick="examine(this,-1)">驳回</button>`;

                }else if(p.status==1){//通过
                    status=`<td class="text-info">审核通过</td>`;
                    show=`<button type="button" class="btn btn-success btn-sm" onclick="examine(this,2)">上架</button>`;

                }else if(p.status==2){//上架
                    status=`<td class="text-success">视频上架</td>`;
                    show=`<button type="button" class="btn btn-warning btn-sm" onclick="examine(this,3)">下架</button>`;

                }else{//下架  --3
                    status=`<td class="text-warning">视屏下架</td>`;
                    show=`<button type="button" class="btn btn-success btn-sm" onclick="examine(this,2)">上架</button>`;

                }
                str+=`<tr>
                        <th>${p.videoId}</th>
                        <td>${p.courseName}</td>
                        <td>${p.teacherName}</td>
                        <td><pre class="mb-0">${p.videoInfo}</pre></td>
                        <th>
                            <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm" >播放/下载</a>
                        </th>
                        ${status}
                        <td>
                            ${show}
                        </td>
                    </tr>`;
                }
            $("#showBody").append(str);
            
        });
    }   
refresh();

//下拉框
function showSel() {
    //下拉框1
    $(".selection")[0].length=1;
    $.ajax({
        url:"../videoCourse_stu/server/vedioPageShow.php",
        type:"post"
    }).done((result)=>{
        var str="";
        for (const p of result) {
            str+=`<option value="${p.courseId}">${p.courseName}</option>`;
        }
        $(".selection:eq(0)").append(str);
    });
    //下拉框2
    $(".selection")[1].length=1;
    $.ajax({
        url:"../videoCourse_stu/server/vedioPageShow2.php",
        type:"post"
    }).done((result)=>{
        var str="";
        for (const p of result) {
            str+=`<option value="${p.teacherId}">${p.teacherName}</option>`;
        }
        $(".selection:eq(1)").append(str);
    });
}
showSel();

//搜索按钮---未完成
function search() {
    var courseId=$(".selection:eq(0)").val();
    var teacherId=$(".selection:eq(1)").val();
    var status=$(".selection:eq(2)").val();
    // console.log(courseId,teacherId,status);
    $.ajax({
        url:"../videoCourse_stu/server/vedioPageSearch.php",
        type:"post",
        data:{
            courseId,
            teacherId,
            status
        },
        dataType:"json"
    }).done((result)=>{
       if (result.success) {
           toastr.warning("搜索不存在");
       }else{
           //表格展示
           var str="";
            $("#showBody").html("");
            for (const p of result) {

                //表格
                var status="";
                var show="";
                if (p.status==-1) {//禁用  status为视频状态，show为按钮展示
                    status=`<td class="text-danger" >审核未通过</td>`;
                    show="";
                }else if(p.status==0){//审核状态
                    status=`<td class="text-primary">待审核</td>`;
                    show=`<button type="button" class="btn btn-primary btn-sm" onclick="examine(this,1)">通过</button>
                        <button type="button" class="btn btn-danger btn-sm" onclick="examine(this,-1)">驳回</button>`;

                }else if(p.status==1){//通过
                    status=`<td class="text-info">审核通过</td>`;
                    show=`<button type="button" class="btn btn-success btn-sm" onclick="examine(this,2)">上架</button>`;

                }else if(p.status==2){//上架
                    status=`<td class="text-success">视频上架</td>`;
                    show=`<button type="button" class="btn btn-warning btn-sm" onclick="examine(this,3)">下架</button>`;

                }else{//下架  --3
                    status=`<td class="text-warning">视屏下架</td>`;
                    show=`<button type="button" class="btn btn-success btn-sm" onclick="examine(this,2)">上架</button>`;

                }
                str+=`<tr>
                        <th>${p.videoId}</th>
                        <td>${p.courseName}</td>
                        <td>${p.teacherName}</td>
                        <td><pre class="mb-0">${p.videoInfo}</pre></td>
                        <th>
                            <a href="./video/01.mkv" target="_black" class="btn btn-light btn-sm" >播放/下载</a>
                        </th>
                        ${status}
                        <td>
                            ${show}
                        </td>
                    </tr>`;
                }
            $("#showBody").append(str);
       }
    })
}

//审核按钮	examine
function examine(obj,num) {
    var id=$(obj).parents()[1].children[0].innerHTML;
    // var id=;
    var status=num;
    $.ajax({
        url:"../videoCourse_stu/server/vedioPageExamine.php",
        type:"post",
        data:{
            id,
            status
        }
    }).done((result)=>{
            if (!result.success) {
                toastr.error("修改失败")
            }
        });
        refresh();
}


</script>